<template>
  <!-- 案件进度 -->
  <div class="case-progress flx-column">
    <div class="flx-1">
      <ProTable
        ref="proTable"
        :columns="columns"
        :toolButton="false"
        :searchParam="state.formParams"
        :requestApi="getList"
        @filterChange="filterChange"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <div class="header-button-lf">
            <el-select v-model="state.formParams.contract" placeholder="请选择合同" clearable style="width: 280px">
              <el-option v-for="(item, index) in contractList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </div>
        </template>
        <!-- 展开行数据 -->
        <template #expand="props">
          <el-table :data="props.row.child" border>
            <el-table-column label="案件号" prop="caseNo" min-width="109">
              <template #default="scope">
                {{ scope.row.caseNo || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="注册号/申请号" prop="registrationNumber" min-width="120">
              <template #default="scope">
                {{ scope.row.registrationNumber || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="案件名称" prop="caseName" min-width="208">
              <template #default="scope">
                {{ scope.row.caseName || "-" }}
              </template>
            </el-table-column>

            <el-table-column label="商标名称" prop="brandName" min-width="85">
              <template #default="scope">
                {{ scope.row.brandName || "-" }}
              </template>
            </el-table-column>
            <el-table-column
              label="商标类别"
              prop="trademarkCategory"
              min-width="112"
              :filters="trademarkCategoryList"
              :filter-method="filterHandler"
            >
              <template #default="scope">
                {{ scope.row.bratrademarkCategoryndName || "-" }}
              </template>
            </el-table-column>
            <el-table-column
              label="案件状态"
              prop="caseStatus"
              min-width="123"
              :filters="trademarkCategoryList"
              :filter-method="filterHandler"
            >
              <template #default="scope">
                {{ scope.row.caseStatus || "-" }}
              </template>
            </el-table-column>
            <el-table-column
              label="提交状态"
              column-key="submissionStatus"
              prop="submissionStatus"
              min-width="104"
              :filters="getTypeList()"
              :filter-method="filterHandler"
            >
              <template #default="scope">
                <el-tag v-if="scope.row.submissionStatus == 1" type="success">已提交</el-tag>
                <el-tag v-else type="warning">待提交</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="审核状态"
              column-key="auditStatus"
              prop="auditStatus"
              min-width="104"
              :filters="getTypeList()"
              :filter-method="filterHandler"
            >
              <template #default="scope">
                <el-tag v-if="scope.row.auditStatus == 1" type="success">已通过</el-tag>
                <el-tag v-if="scope.row.auditStatus == 2" type="danger">已拒绝</el-tag>
                <el-tag v-else type="warning">待审核</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="已递交/次" prop="count" min-width="115" sortable="true">
              <template #default="scope">
                {{ scope.row.count || "-" }}
              </template>
            </el-table-column>
            <el-table-column
              label="递交状态"
              prop="submissionStatus2"
              min-width="104"
              :filters="getTypeList()"
              :filter-method="filterHandler"
            >
              <template #default="scope">
                <el-tag v-if="scope.row.submissionStatus2 == 1" type="success">已递交</el-tag>
                <el-tag v-else type="warning">待递交</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="operation" min-width="225" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="openCaseDetail(scope)">案件详情</el-button>
                <el-button link type="primary" @click="openMaterials(scope)">查看材料</el-button>
                <el-button link type="primary">编辑提交</el-button>
                <!-- <el-button link type="primary">重新提交</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </template>

        <template #updateTimeHeader="scope">
          <span class="inline-block">
            <span class="flx-align-center">
              <span>{{ scope.column.label }}</span>
              <span class="flx-align-center ml-10">
                <el-icon @click.stop="handleClickCalendar"><Calendar /></el-icon>
                <el-date-picker
                  v-model="times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  ref="timePick"
                  class="time-pick"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="timeChange"
                >
                </el-date-picker>
              </span>
            </span>
          </span>
        </template>

        <!-- 图标 -->
        <template #icon>
          <el-image src="" fit="cover" style="width: 30px; height: 30px"></el-image>
        </template>

        <!-- 状态 -->
        <template #state>
          <el-tag type="success">已存</el-tag>
        </template>

        <!-- 操作 -->
        <template #operation>
          <el-button link type="primary">编辑提交</el-button>
        </template>
      </ProTable>
    </div>
  </div>

  <!-- 客户材料详情 -->
  <client-materials-detail v-if="showMaterialsDetail" ref="clientMaterialsDetailRef"></client-materials-detail>

  <!-- 案件详情 -->
  <case-detail v-if="showCaseDetail" ref="caseDetailRef"></case-detail>
</template>

<script lang="tsx" setup>
import { ref, reactive, nextTick } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ClientMaterialsDetail from "../ClientMaterials/ClientMaterialsDetail.vue";
import CaseDetail from "./CaseDetail.vue";

// 合同列表
const contractList = [
  { id: 1, name: "合同1" },
  { id: 2, name: "合同2" },
  { id: 3, name: "合同3" },
  { id: 4, name: "合同4" }
];

// 获取申请人类型
const getTypeList = () => {
  return [
    { text: "A", value: "A" },
    { text: "B", value: "B" },
    { text: "C", value: "C" },
    { text: "D", value: "D" },
    { text: "E", value: "E" },
    { text: "F", value: "F" },
    { text: "G", value: "G" }
  ];
};

// ProTable 实例
const proTable = ref();

// 表格配置项
const columns = reactive([
  {
    type: "expand",
    width: 34
  },
  {
    prop: "businessName",
    label: "业务名称",
    minWidth: 109
  },
  {
    prop: "businessNumber",
    label: "业务数量",
    minWidth: 101,
    sortable: "custom"
  },
  {
    prop: "receivedAmount",
    label: "实收金额(元)",
    minWidth: 126,
    sortable: "custom"
  },
  {
    prop: "username",
    label: "申请人",
    minWidth: 102
  },
  {
    prop: "type",
    columnKey: "type",
    label: "申请人类型",
    minWidth: 125,
    filterMultiple: true,
    filters: getTypeList()
  },
  {
    prop: "state",
    label: "状态",
    minWidth: 191
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 191,
    fixed: "right"
  }
]);

const state = reactive({
  formParams: {}
});

// 选择时间
const times = ref([]);
const timePick = ref();
const handleClickCalendar = () => {
  timePick.value.focus();
};
const timeChange = () => {
  console.log(times);
};

const getList = () => {
  return new Promise((resolve, reject) => {
    return resolve({
      data: {
        list: [
          {
            child: [
              {
                trademarkCategory: "1",
                caseStatus: "2"
              }
            ]
          }
        ]
      }
    });
  });
};

// 表头筛选 columnKey 必填
const filterChange = e => {
  state.formParams[Object.keys(e)] = e[Object.keys(e)];
  proTable.value?.search();
};

// 子级表格筛选
const filterHandler = (value, row, e) => {
  return row[e.property] == value;
};

// 商标分类
const trademarkCategoryList = ref([{ text: "111", value: 1 }]);

// 查看材料
const showMaterialsDetail = ref(false);
const clientMaterialsDetailRef = ref();
const openMaterials = row => {
  showMaterialsDetail.value = true;
  let params = {
    title: "商标注册材料",
    row: { ...row }
  };
  nextTick(() => {
    clientMaterialsDetailRef.value.acceptParams(params);
  });
};

// 查看案件详情
const showCaseDetail = ref(false);
const caseDetailRef = ref();
const openCaseDetail = row => {
  showCaseDetail.value = true;
  let params = {
    row: { ...row }
  };
  nextTick(() => {
    caseDetailRef.value.acceptParams(params);
  });
};
</script>

<style lang="scss" scoped></style>
